<template>
  <div class="session">
    <div class="wrap-box" v-for="(i,index) in Chatlist" :key="index">
      <div class="main-box" @click="tochat(i.id)">
        <img :src="i.tx" class="imgs">
        <div class="right-box">
          <div class="top-box">
            <span>{{i.name}}</span>
            <span class="Sx_time"><badge v-if="i.badge>0" :text='i.badge' style="float:right"></badge>{{i.time}}</span>
          </div>
          <div class="bottom-box">
            <div class="content-box">{{i.text !=''? i.text : '[图片信息]'}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>



</template>

<script>
export default {
 data () {
    return {
      Chatlist:[
      ]
    }
  },
  methods: {
    tochat(x){
      this.$router.push('/Chatbody/' + x);
    },
    getchatlist(){
          var that = this;
          var id = this.$store.state.wd.wdid;
          that.$http.get("http://localhost:3000/api/getchatlist/" + id)
          .then(
          (response)=>{
            console.log(response.data.msg)
            for(let i=0; i< response.data.msg.list.length; i++){
              if(id ==response.data.msg.list[i].from){
                var b = 0;
                for(var j = 0; j < response.data.msg.list[i].body.length; j++){
                if(response.data.msg.list[i].body[j].sender!=id){
                b=parseInt(b+parseInt(response.data.msg.list[i].body[j].status));
                }
                }
                var list = {
                id:response.data.msg.list[i].to,
                name:response.data.msg.list[i].tname,
                tx:response.data.msg.list[i].ttx,
                text:response.data.msg.list[i].body[response.data.msg.list[i].body.length-1].text,
                time:response.data.msg.list[i].body[response.data.msg.list[i].body.length-1].ttime,
                img:response.data.msg.list[i].body[response.data.msg.list[i].body.length-1].img,
                badge:b};
                that.Chatlist.push(list);
                  }
              else{
                var b = 0;
                for(var j = 0; j < response.data.msg.list[i].body.length; j++){
                if(response.data.msg.list[i].body[j].sender!=id){
                b=parseInt(b+parseInt(response.data.msg.list[i].body[j].status));
                }
                }
                var list = {
                id:response.data.msg.list[i].from,
                name:response.data.msg.list[i].fname,
                tx:response.data.msg.list[i].ftx,
                text:response.data.msg.list[i].body[response.data.msg.list[i].body.length-1].text,
                time:response.data.msg.list[i].body[response.data.msg.list[i].body.length-1].ttime,
                img:response.data.msg.list[i].body[response.data.msg.list[i].body.length-1].img,
                badge:b};
                that.Chatlist.push(list);
                  }
              }
              this.$vux.loading.hide();
          },
          (error)=>{
          console.log("err");
              });
        }
  },
  mounted(){
    this.$vux.loading.show();
    this.getchatlist();
  }

}
</script>

<style lang="less" scoped>
  .wrap-box{
    margin: 20px;
  }
  .main-box{
   width: 100%;
   height: 50px;
   display: flex;
  }
  .imgs{
    width: 50px;
    margin-right: 20px;
    border-radius: 50%;
  }
  .right-box{
    width: 100%;
  }
  .top-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .content-box{
    max-width: 270px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color:rgb(151, 151, 151);
  }
  .Sx_time{
    font-size: 13px;
    color:rgb(151, 151, 151);
  }

</style>
